<template>
  <div class="clue-container">
    <div class="list-wrap">
      <!--tab按钮筛选-->
      <ul class="tab-wrap">
        <li class="tab-item" @click="tabChange(0)" :class="{current: tabIndex===0}">
          <div>全部</div>
          <i>{{clueCount.allCount}}</i>
        </li>
        <li class="tab-item" @click="tabChange(1)" :class="{current: tabIndex===1}">
          <div>待处理</div>
          <i>{{clueCount.notChangeCount}}</i>
        </li>
        <li class="tab-item" @click="tabChange(2)" :class="{current: tabIndex===2}">
          <div>已转换</div>
          <i>{{clueCount.hasChangeCount}}</i>
        </li>
        <li class="tab-item" @click="tabChange(3)" :class="{current: tabIndex===3}">
          <div>将过期</div>
          <i>{{clueCount.sCount}}</i>
        </li>
      </ul>
      <!--下拉框筛选-->
      <div class="filter filter-2">
        <div @click="showFilterList('product')"><span>{{filterProductName}}</span><i></i></div>
        <div @click="showFilterList('type')"><span>{{filterTypeName}}</span><i></i></div>
      </div>
      <!--线索列表-->
      <ul class="clue-list" v-if="clueList.length > 0"
          v-infinite-scroll="loadMoreClue"
          :infinite-scroll-disabled="loading"
          infinite-scroll-distance="1">
        <li class="clue-item" v-for="item in clueList" :key="item.pid" @click="clueToDetail(item.pid)">
          <div>{{item.name}}</div>
          <div><span>{{item.customName}}</span><span class="ml15">{{item.position}}</span></div>
          <div>
            <span>{{item.productTypeName}}</span>
            <i v-show="tabIndex==0 || tabIndex==1" class="color-red">{{item.dealTime | toHistoryDate}}获取</i>
            <i v-show="tabIndex==2 || tabIndex==3" class="color-red">{{item.lastLogTime | toHistoryDate}}跟进</i>
          </div>
        </li>
      </ul>
      <div v-if="clueList.length === 0" class="no-data">暂无数据</div>
      <div v-if="clueList.length > 0 && isLoaded" class="no-data">已全部加载完成</div>
    </div>
    <!--产品和类型ModalPage-->
    <div class="filter-cnt-wrap" v-if="isShowFilterList">
      <div class="filter-cnt">
        <ul class="filter-list filter-list-2">
          <li @click="tabFilter(0)" :class="{selected: filterIndex===0}">全部产品</li>
          <li @click="tabFilter(1)" :class="{selected: filterIndex===1}">最新获得</li>
        </ul>
        <div class="product-sort-wrap">
          <ul class="product-sort" v-show="filterIndex===0">
            <li :class="{selected: productTypeName === '全部产品'}" @click="selectOneProduct(-1)">全部产品</li>
            <li v-for="(product, index) in productList" :key="product.productType.pid"
                :class="{selected: productTypeName === product.productType.name}"
                @click="selectOneProduct(index)">{{product.productType.name}}</li>
          </ul>
          <ul class="subProduct-sort" v-show="filterIndex===0">
            <li :class="{selected: productName === '全部'}" @click="selectSubProduct('', '全部')">全部</li>
            <li v-for="subProduct in subProductList" :key="subProduct.pid"
                :class="{selected: productName == subProduct.name}"
                @click="selectSubProduct(subProduct.pid, subProduct.name)">{{subProduct.name}}</li>
          </ul>
        </div>
        <ul class="date-sort" v-show="filterIndex===1">
          <li @click="selectType('create')" :class="{selected: filterTypeName==='最新获得'}">最新获得</li>
          <li @click="selectType('update')" :class="{selected: filterTypeName==='最近更新'}">最近更新</li>
        </ul>
      </div>
    </div>
    <div class="black-mask" @click="hideFilterList()" v-if="isShowMask"></div>
  </div>
</template>

<script>
import {GetClueList, GetAllProducts} from '@/services/common.service'
import {GetClueCount} from '@/services/clue.service'
export default {
  name: 'ClueIndex',
  data () {
    return {
      // tab页签的切换
      tabIndex: 0,
      clueCount: {},
      productTypeId: '',
      product: '',
      // 下拉框筛选
      isShowFilterList: false,
      isShowMask: false,
      filterIndex: '',
      filterProductName: '全部产品',
      filterTypeName: '最新获得',
      productTypeName: '全部产品',
      productName: '全部',
      productList: [],
      subProductList: [],
      // 线索列表list
      loading: false,
      isLoaded: false,
      clueList: [],
      limit: 6,
      offset: 0,
      orderby: 'createTime',
      direction: 'DESC',
      clueStatus: 10

    }
  },
  computed: {
    clueParams () {
      let params = {
        dealUserIds: [window.getLocalStorage('userId')],
        clueStatus: this.clueStatus
      }
      if (this.productName === '全部') {
        params.productTypeId = this.productTypeId
      } else {
        params.productTypeId = this.productTypeId
        params.product = this.product
      }
      return params
    },
    countParams () {
      let param = {
        type: 0,
        dealUserIds: [window.getLocalStorage('userId')]
      }
      if (this.productName === '全部') {
        param.productTypeId = this.productTypeId
      } else {
        param.productTypeId = this.productTypeId
        param.product = this.product
      }
      return param
    }
  },
  watch: {
    clueParams () {
      this.getAllClue()
    },
    countParams () {
      this.getBusinessCount()
    }
  },
  created () {
    this.initClueList()
  },
  methods: {
    initClueList () {
      this.getAllClue()
      this.getClueCount()
      this.getAllProducts()
    },
    // tab点击事件
    tabChange (index) {
      this.offset = 0
      if (index === 0) {
        this.tabIndex = index
        this.clueStatus = 10
      }
      if (index === 1) {
        this.tabIndex = index
        this.clueStatus = 7
      }
      if (index === 2) {
        this.tabIndex = index
        this.clueStatus = 6
      }
      if (index === 3) {
        this.tabIndex = index
        this.clueStatus = 3
      }
    },
    // 下拉框筛选
    showFilterList (type) {
      this.isShowFilterList = true
      this.isShowMask = true
      type === 'product' ? this.filterIndex = 0 : this.filterIndex = 1
    },
    hideFilterList () {
      this.isShowFilterList = false
      this.isShowMask = false
    },
    tabFilter (filterIndex) {
      this.filterIndex = filterIndex
    },
    getAllProducts () {
      GetAllProducts().then((res) => {
        this.productList = res
        res.forEach((item) => {
          this.subProductList = item.products
        })
      })
    },
    selectOneProduct (index) {
      if (index === -1) { // 点击一级产品里的'全部产品'
        this.subProductList = []
        this.productTypeId = ''
        this.productTypeName = '全部产品'
      } else {
        this.subProductList = this.productList[index].products
        this.productTypeId = this.productList[index].productType.pid
        this.productTypeName = this.productList[index].productType.name
      }
    },
    selectSubProduct (productId, productName) {
      if (productId === '') {
        this.product = ''
        this.productName = '全部'
        this.filterProductName = this.productTypeName
      } else {
        this.product = productId
        this.productName = productName
        this.filterProductName = productName
      }
      this.hideFilterList()
    },
    selectType (dateType) {
      if (dateType === 'create') {
        this.filterTypeName = '最新获得'
        this.orderby = 'createTime'
        this.getAllClue()
      } else if (dateType === 'update') {
        this.filterTypeName = '最近更新'
        this.orderby = 'lastLogTime'
        this.getAllClue()
      }
      this.hideFilterList()
    },
    // 线索数量count
    getClueCount () {
      GetClueCount(this.countParams).then((res) => {
        this.clueCount = res
      })
    },
    // 线索列表list
    getAllClue () {
      this.loading = true
      GetClueList(this.limit, this.offset, this.orderby, this.direction, this.clueParams).then((res) => {
        if (res.datas.length === 0) {
          this.clueList = []
        } else {
          this.clueList = this.clueList.concat(res.datas)
          this.offset = this.limit + this.offset
          res.datas.length < this.limit ? this.isLoaded = true : this.isLoaded = false
        }
        this.loading = false
      })
    },
    loadMoreClue () {
      this.getAllClue()
    },
    clueToDetail (id) {
      this.$router.push(`/clueDetail/${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .list-wrap
    padding 0 15px
  /*线索列表*/
  .clue-item
    margin-top 10px
    margin-bottom 10px
    padding 10px
    background #fff
    border-radius 4px
    overflow hidden
    div:first-child
      font-size: 16px !important
      line-height: 22px
      margin-bottom: 5px
    div:not(:first-child)
      color: #999
      font-size: 12px !important
      line-height: 18px
    div i
      float: right
      font-size: 12px
</style>
